<template>
  <lay-card :bordered="false">
    <ContentHeader />
    <Loading :loading="isLoading">
      <lay-form ref="formRef" :model="formState" size="xs" style="max-width: 400px">
        <lay-form-item
          label="姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="real_name"
        >
          <lay-input
            type="text"
            v-model="formState.real_name"
            placeholder="管理员姓名"
            allow-clear
          />
        </lay-form-item>
        <lay-form-item
          label="登录名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="user_name"
        >
          <lay-input
            type="text"
            v-model="formState.user_name"
            placeholder="登录用户名"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item
          label="用户密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="password"
        >
          <lay-input
            type="password"
            v-model="formState.password"
            placeholder="登录密码"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item
          label="确认密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="password_confirm"
        >
          <lay-input
            type="password"
            v-model="formState.password_confirm"
            placeholder="确认密码"
            allow-clear
          />
        </lay-form-item>
        <lay-form-item style="text-align: center">
          <lay-button
            type="primary"
            native-type="submit"
            @click="handleSubmit"
            :loading="isLoading"
            :disabled="isLoading"
            >提交</lay-button
          >
        </lay-form-item>
      </lay-form>
    </Loading>
  </lay-card>
</template>
<script setup>
import { ref } from "vue";
import { msgSuccess, msgError } from "@/utils/message";
import { getUserInfo, updateInfo } from "@/api/user/user";
import { one_assign } from "@/utils/tool";
import { cache } from "@/utils/cache";

// 读取环境配置
const AppConfig = window.AppConfig;
// 定义动态数据
const isLoading = ref(false);
// 标签布局属性
const labelCol = ref({
  span: 4,
});
// 输入框布局属性
const wrapperCol = ref({
  span: 12,
});
const formState = ref({
  real_name: "",
  user_name: "",
  password: "",
  password_confirm: "",
});
const formRef = ref(undefined);

// 获取登录信息
isLoading.value = true;
getUserInfo()
  .then((result) => {
    if (result.status == 200) {
      const {
        data: { userInfo },
      } = result;
      formState.value = one_assign(formState.value, userInfo);
    }
  })
  .finally(() => {
    isLoading.value = false;
  });

// 提交
const handleSubmit = () => {
  if (formState.value.real_name == "") {
    return msgError("姓名不能为空");
  }
  if (formState.value.user_name == "") {
    return msgError("登录名不能为空");
  }
  if (formState.value.password != "") {
    if (formState.value.password !== formState.value.password_confirm) {
      return msgError("两次密码不一致");
    }
  }

  isLoading.value = true;
  updateInfo({ form: formState.value })
    .then((result) => {
      if (result.status == 200) {
        let user = cache(AppConfig.BASE_API_TOKEN_NAME + "_user");
        user.UserName = formState.value.user_name;
        // 更新存入缓存
        cache(AppConfig.BASE_API_TOKEN_NAME + "_user", user);

        msgSuccess(result.message);
        setTimeout(() => {
          window.location.reload();
        }, 800);
      } else {
        msgError(result.message);
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};
</script>
